<!DOCTYPE html>
<html>
<head>
    <title>Bevel Gears Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas id="physicsCanvas" width="450" height="450"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Helper function to draw a dash-dot line
    function drawDashDotLine(context, x1, y1, x2, y2) {
        context.save();
        context.beginPath();
        context.setLineDash([10, 4, 3, 4]);
        context.moveTo(x1, y1);
        context.lineTo(x2, y2);
        context.stroke();
        context.restore();
    }

    // --- General Style ---
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.lineCap = 'round';

    // --- Draw Main Gear Assembly (as a single cross-section) ---
    ctx.beginPath();
    ctx.moveTo(110, 90);    // Top-left corner of A
    ctx.lineTo(290, 90);    // Top-right corner of A
    ctx.lineTo(250, 130);   // Right slanted edge of A
    ctx.lineTo(150, 130);   // Bottom edge of A (inner corner)
    ctx.lineTo(150, 300);   // Right vertical edge of B
    ctx.lineTo(110, 340);   // Bottom slanted edge of B
    ctx.closePath();        // Left vertical edge of A and B
    ctx.stroke();

    // --- Draw Gear A components ---
    // Axis of rotation for A
    drawDashDotLine(ctx, 200, 60, 200, 130);

    // Shaft of A
    ctx.strokeRect(190, 70, 20, 20);

    // Rotation arrow for A
    ctx.beginPath();
    const arcCenterX = 200;
    const arcCenterY = 65;
    const arcRadius = 35;
    const startAngle = -0.75 * Math.PI;
    const endAngle = -0.25 * Math.PI;
    ctx.arc(arcCenterX, arcCenterY, arcRadius, startAngle, endAngle);
    ctx.stroke();

    // Manually draw the arrowhead to indicate clockwise rotation
    const arrowX = arcCenterX + arcRadius * Math.cos(endAngle);
    const arrowY = arcCenterY + arcRadius * Math.sin(endAngle);
    ctx.beginPath();
    ctx.moveTo(arrowX, arrowY);
    ctx.lineTo(arrowX - 10, arrowY - 2);
    ctx.moveTo(arrowX, arrowY);
    ctx.lineTo(arrowX - 4, arrowY + 9);
    ctx.stroke();

    // Label for angular velocity (ω₀)
    ctx.font = "italic 24px 'Times New Roman'";
    ctx.fillText("ω", 245, 75);
    ctx.font = "18px 'Times New Roman'";
    ctx.fillText("0", 262, 80);

    // Label "A"
    ctx.font = "24px Arial";
    ctx.fillText("A", 220, 115);

    // --- Draw Gear B components ---
    // Axis of rotation for B
    drawDashDotLine(ctx, 60, 215, 150, 215);

    // Shaft of B
    ctx.strokeRect(60, 205, 30, 20);

    // Label "B"
    ctx.font = "24px Arial";
    ctx.fillText("B", 125, 250);

    // --- Draw Bottom Text ---
    ctx.font = "24px 'SimSun', 'Microsoft YaHei'"; // Use fonts that support Chinese characters
    ctx.fillText("习题 3-20 图", 150, 400);

</script>
</body>
</html>